<template>
  <a-select v-model="id" :placeholder="placeholder || $t('m.common.label.option_select')" @change="change" :allowClear="true">
    <a-select-option v-for="item in options" :key="item.value" :value="item.value">
      {{item.text}}
    </a-select-option>
  </a-select>
</template>

<script>

  import {getAction} from '@/api/manage'
  import YchConstant from "@/api/YchConstant";

  export default {
    name: 'WidgetColSelect',
    props: {
      value: {
        type: String,
        default: null
      },
      widgetCode: {
        type: String,
        default: null
      },
      placeholder: {
        type: String,
      },
    },
    data() {
      return {
        id: undefined,
        options: [],
        url: {
          queryWidgetColByCode: YchConstant.PREFIX_EFORM + '/report/actReportWidget/queryWidgetColByCode',
        }
      }
    },
    watch: {
      value: {
        handler(value) {
          this.id = value || undefined
        },
        immediate: true
      },
      widgetCode: {
        handler() {
          this.createOptions()
        },
        immediate: true
      }
    },
    methods: {
      change(value) {
        this.$emit('change', value)
      },
      createOptions() {
        if (!this.widgetCode) {
          this.options = []
          return
        }
        getAction(this.url.queryWidgetColByCode, {widgetCode: this.widgetCode}).then((res) => {
          if (res.success) {
            this.options = res.result
          } else {
            this.options = []
          }
        })
      }
    },
    model: {
      prop: 'value',
      event: 'change'
    }
  }
</script>
